<template>
  <tab-bar>
    <mt-header title="资讯" slot="header"></mt-header>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="disabledScroll"
      infinite-scroll-distance="10"
      infinite-scroll-immediate-check="false"
      slot="main"
      class="news scroll-view">
      <div class="top">
        <router-link to="/news-list/DYZJ" class="item"><i class="xffont xf-dangyuan"></i><span>党员之家</span></router-link>
        <router-link to="/news-list/DAGL" class="item"><i class="xffont xf-danganguanli"></i><span>档案管理</span></router-link>
        <router-link to="/news-list/RSDL" class="item"><i class="xffont xf-daili"></i><span>人事代理</span></router-link>
        <router-link to="/news-list/JXJY" class="item"><i class="xffont xf-jiaoyu1"></i><span>继续教育</span></router-link>
        <router-link to="/news-list/JYCY" class="item"><i class="xffont xf-jiuyechuangye"></i><span>就业创业</span></router-link>
        <router-link to="/news-list/ZXZW" class="item"><i class="xffont xf-user"></i><span>中心政务</span></router-link>
      </div>
      <mt-navbar v-model="selected">
        <mt-tab-item id="XWDT">新闻动态</mt-tab-item>
        <mt-tab-item id="XYXX">行业消息</mt-tab-item>
        <mt-tab-item id="TGGG">通告公告</mt-tab-item>
      </mt-navbar>
      <div class="news-list">
        <router-link :to="`/news/detail?canc11=${val.canc11 || ''}&cand01=${val.cand01 || ''}`" class="item" v-for="(val, key) in list" :key="key">
          <span class="title">{{val.cand03}}</span>
          <div class="content">
            <span>{{$dateFormat(val.cand07).format('YYYY-MM-DD')}}</span>
            <span>{{val.cand13}} 阅读</span>
          </div>
        </router-link>
      </div>
      <loading-text v-if="loading"></loading-text>
      <finish-text v-if="noMore"></finish-text>
      <empty v-if="empty"></empty>
      <yd-backtop></yd-backtop>
    </div>
    <transition name="router" mode="out-in">
      <router-view class="fixed-router" :key="$route.fullPath"></router-view>
    </transition>
  </tab-bar>
</template>
<script>
  import TabBar from '../../layouts/tab-bar/index.vue'
  import LoadingText from '../../components/loading-text/loading-text.vue'
  import FinishText from '../../components/finish-text/finish-text.vue'
  import {http} from '../../common/js/util'
  import {infinite} from '../../common/js/mixin'
  import Empty from '../../components/empty/empty.vue'
  import DefaultLayout from '../../layouts/default-layout/default-layout'

  export default {
    computed: {
      ...infinite
    },
    components: {
      DefaultLayout,
      Empty,
      FinishText,
      LoadingText,
      TabBar},
    data() {
      return {
        selected: 'XWDT',
        /* 以下五个参数为上拉加载页面必需的参数 */
        loading: true,
        page: 1,
        size: 10,
        total: 0,
        list: []
      /* 以上五个参数为上拉加载页面必需的参数 */
      }
    },
    methods: {
      loadMore(canc11) {
        if (this.page === 1) this.list = []
        http({
          method: 'post',
          url: '/sapi/news/get/article/list',
          data: {
            canc11: canc11 || this.selected,
            page: this.page,
            rows: this.size
          }
        }, loading => {
          this.loading = loading
        }).then(res => {
          this.list = this.list.concat(res.data.articleList)
          this.total = res.data.articleListPageBean.totalCount
          this.page++
        })
      },
      getMenus() {
        http({
          method: 'post',
          url: '/sapi/news/get/all/article/column/child/list',
          data: {
            pid: 0
          }
        }).then(res => {
          console.log(res)
        })
      }
    },
    created() {
      this.loadMore(this.selected)
      this.$watch('selected', newVal => {
        this.page = 1
        this.loadMore(newVal)
      })
    // this.getMenus()
    }
  }
</script>
<style scoped lang="scss">
  @import "../../common/style/variable";
  .top{
    margin: .2rem;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 33.3%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: .15rem .1rem;
      .xffont{
        font-size: .6rem;
        color: $primary;
      }
      span{
        margin: 5px 0 0 0;
      }
    }
  }
  .news-list{
    background: #fff;
    .item{
      display: block;
      padding: .2rem .2rem;
      border-bottom: 1px solid #ededed;
      @include active;
      &:first-child{
        border-top: 1px solid #ededed;
      }
      .title{
        font-size: .3rem;
        display: inline-block;
        width: 100%;
        @include ellipsis;
        padding: 0 0 .1rem 0;
      }
      .content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #666;
        .xf-liulan{
          font-size: .26rem;
        }
      }
    }
  }
</style>
